<template>
  <div>
    <div>
      <el-divider content-position="left">用户查询</el-divider>
      <el-form ref="uform" :model="uform" label-width="80px" class="">
        <el-form-item class="form-item" label="用户名称">
          <el-input v-model="uform.uname" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="登录名称">
          <el-input v-model="uform.logname" placeholder="登录名称"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="用户昵称">
          <el-input v-model="uform.nickname" placeholder="用户昵称"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="年龄">
          <el-input v-model="uform.age" placeholder="年龄"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="邮箱">
          <el-input v-model="uform.umail" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item class="form-item" label="手机号">
        <el-input v-model="uform.uphone" placeholder="手机号"></el-input>
      </el-form-item>
        <el-form-item class="form-item" label="头像路径">
        <el-input v-model="uform.avaurl" placeholder="头像路径"></el-input>
      </el-form-item>
      <el-form-item class="form-item" label="地址">
        <el-input v-model="uform.uaddress" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item class="form-item">
        <el-button class="form-btn" type="primary" @click="onQuery">查询</el-button>
        <el-button class="form-btn" @click="clearQuery">重置</el-button>
      </el-form-item>
      </el-form>
    </div>

    <el-divider content-position="left">用户列表</el-divider>
    <!--增改删导出-->
    <el-row>
      <el-button class="tag-btn" type="success" plain @click="addUserVisible = true">新增</el-button>
      <el-button class="tag-btn" type="warning" plain @click="modifyItf('modify')">修改</el-button>
      <el-button class="tag-btn" type="danger" plain @click="delItf('del')">删除</el-button>
      <el-button class="tag-btn" type="info" plain @click="outputItfData">导出</el-button>
      <el-button class="tag-btn" type="primary" plain @click="relateRole">关联角色</el-button>
      <template>
        <el-input-number class="curPageCounter" @change="handleCurrentChange" v-model="curPage" :min="1" :max="pages" label="描述文字"></el-input-number>
      </template>
    </el-row>

    <!--列表-->
    <template>
      <el-table
        class="interface-table"
        ref="multipleTable"
        :data="utableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          align="center"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          align="center"
          prop="username"
          label="用户名"
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="loginName"
          label="登录名"
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="roleName"
          label="角色名"
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="昵称"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="age"
          label="年龄"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="email"
          label="邮箱"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          label="手机号"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          prop="avaUrl"
          label="头像路径"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          prop="enabled"
          label="是否启用"
          width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enabled"
              @change="handlePeopleSwithEnable(scope)"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="地址"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              v-show="scope.row.enabled"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          background
          class="interpage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>
    <!--新增接口对话框-->
    <el-dialog
      title="新增用户"
      :visible.sync="addUserVisible"
      width="40%">
      <el-form class="regForm" :rules="regRules" ref="regForm" :model="regForm" label-width="80px">
        <el-form-item class="form_item" label="账号" prop="loginname">
          <el-input type="text" placeholder="请输入账号" v-model="regForm.loginname"/>
        </el-form-item>
        <el-form-item class="form_item" label="密码" prop="loginpwd">
          <el-input type="password" placeholder="请输入密码" v-model="regForm.loginpwd"/>
        </el-form-item>
        <el-form-item class="form_item" label="用户名" prop="username">
          <el-input class="inp" placeholder="请输入用户名" v-model="regForm.username"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="昵称">
          <el-input class="inp" v-model="regForm.nickname"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="出生日期">
          <el-col class="inp" :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="regForm.birthday" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item class="form_item" label="电子邮箱">
          <el-input class="inp" v-model="regForm.email"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="手机号码">
          <el-input class="inp" v-model="regForm.phone"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="通信地址">
          <el-input class="inp" type="textarea" v-model="regForm.address"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="addUserVisible = false">取 消</el-button>
            <el-button type="primary" @click="addItf">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--修改接口对话框-->
    <el-dialog
      title="修改用户信息"
      :visible.sync="modifyItfVisible"
      width="40%">
      <el-form label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="modifyUserForm.username" :placeholder="modifyUserForm.username" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="登录名">
          <el-input v-model="modifyUserForm.loginname" :placeholder="modifyUserForm.loginname" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="modifyUserForm.nickname" :placeholder="modifyUserForm.nickname"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="出生日期">
          <el-col class="inp" :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="modifyUserForm.birthday" :placeholder="modifyUserForm.birthday"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item class="form_item" label="电子邮箱">
          <el-input class="inp" v-model="modifyUserForm.email"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="手机号码">
          <el-input class="inp" v-model="modifyUserForm.phone"></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="通信地址">
          <el-input class="inp" type="textarea" v-model="modifyUserForm.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyItfVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitModifyUser">提交</el-button>
      </span>
    </el-dialog>

    <el-dialog title="关联用户角色" :visible.sync="relateRoleVisible">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="当前角色">
          <el-input v-model="formInline.curRole" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="新角色">
          <el-select v-model="formInline.newRole" placeholder="请选择">
            <el-option v-for="(tb,i) in roleNames" :key="i" :label="tb" :value="tb"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="relateRoleOpr">经办</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "people",
    props: {
    },
    data() {
      return {
        /*查询表单*/
        uform: {
          uname: '',
          logname: '',
          nickname: '',
          age: '',
          umail: '',
          uphone: '',
          avaurl: '',
          uaddress: '',
        },
        regForm: {
          loginname: '',
          loginpwd: '',
          username: '',
          nickname: '',
          birthday: '',
          email: '',
          phone: '',
          address: '',
        },
        regRules: {
          loginname: [
            { required: true, message: '账号禁止为空！', trigger: 'blur' },
          ],
          username: [
            { required: true, message: '姓名禁止为空！', trigger: 'blur' },
          ],
          loginpwd: [
            { required: true, message: '密码禁止为空！', trigger: 'blur' },
          ]
        },
        /*用户列表*/
        utableData: [],
        multipleSelection: [],
        /*分页*/
        curPage: 1,
        size: 5,
        total: 0,
        pages: 0,
        addUserVisible: false,
        modifyItfVisible: false,
        modifyUserForm: {
          username: '',
          loginname: '',
          nickname: '',
          birthday: '',
          phone: '',
          address: '',
          email: ''
        },
        relateRoleVisible: false,
        formInline: {
          curRole: '',
          newRole: ''
        },
        roleNames: []
      }
    },
    mounted: function(){
      this.queryUserList();
    },
    computed: {
      headers() {
        return {
          Authentication: this.$store.state.token,
          RefreshToken: this.$store.state.refresh_token
        };
      }
    },
    methods: {
      handlePeopleSwithEnable(scope){
        this.$http.post("/user/isEnable", {
          "username": scope.row.username,
          "loginname": scope.row.loginName,
          "isEnabled": scope.row.enabled
        }).then(resp => {
          if(resp.data.errCode === 200){
            if(scope.row.enabled){
              this.$message.success("用户["+scope.row.username+"]已启用");
            }else{
              this.$message.success("用户["+scope.row.username+"]已停用");
            }
          }
        })
      },
      resetInterfaceQueryForm(form) {
        this.$refs[form].resetFields();
      },
      //接口查询
      onQuery(){
        this.queryUserList();
        console.log("查询成功！");
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.modifyItf(row.loginName);
      },
      handleDelete(index, row) {
        console.log(index, row);
        if(confirm("确认要删除？")){
          this.delItf(row.loginName);
        };
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size = val;
        this.queryItfList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.curPage = val;
        this.queryUserList();
      },
      //提交新增接口
      addItf(){
        console.log("提交成功！");
        this.$http.post("/user/register", this.regForm).then(resp => {
          if(resp.data.errCode === 200){
            this.$notify.success({
              title: 'SUCCESS',
              message: '新增成功！',
              showClose: false
            });
            this.addUserVisible = false;
            this.queryUserList();
            return;
          }
          this.$message.error(resp.data.errCode + " : " + resp.data.errMsg);
        });
      },
      //修改按钮(oprNum操作数为1时则为“修改”功能，否则为编辑)
      modifyItf(oprNum){
        //修改
        if(oprNum === 'modify'){
          //判断是否已选择
          if(this.multipleSelection.length !== 1){
            this.$message.error("请选择一条用户数据！");
            return;
          }
          this.modifyItfVisible = true;
          this.multipleSelection.forEach(t => {
            this.queryOne(t.loginName);
          });
        }else { //编辑
          this.queryOne(oprNum);
        }
      },
      //删除
      delItf(oprNum){
        //删除按钮
        if(oprNum === 'del'){
          //判断是否已选择
          if(this.multipleSelection.length !== 1){
            this.$message.error("请选择一条用户数据！");
            return;
          }
          if(confirm("确认要删除？")){
            this.multipleSelection.forEach(t => {
              this.submitDelItf(t.loginName);
            });
          }
        }else { //操作中的删除
          this.submitDelItf(oprNum);
        }
      },
      //关联角色
      relateRole(){
        //判断是否已选择
        if(this.multipleSelection.length !== 1){
          this.$message.error("请选择一条用户数据！");
          return;
        }
        this.relateRoleVisible = true;
        //赋值
        this.formInline.curRole = this.multipleSelection[0].roleName;
        //查询出所有非当前角色之外的所有角色
        this.$http.post("/role/info/queryRolesOutOfSelfRole", {
          "roleName": this.formInline.curRole
        }).then(resp => {
          if(resp.data.errCode === 200){
            this.roleNames = resp.data.data;
          }
        })
      },

      //修改接口
      submitModifyUser(){
        this.$http.post("/user/mod", {
          "username": this.modifyUserForm.username,
          "loginName": this.modifyUserForm.loginname,
          "nickname": this.modifyUserForm.nickname,
          "birthday": this.modifyUserForm.birthday,
          "email": this.modifyUserForm.email,
          "phone": this.modifyUserForm.phone,
          "address": this.modifyUserForm.address,
        }).then(resp => {
          if(resp.data.errCode === 200){
            this.$message.success("用户信息修改成功！");
            this.modifyItfVisible = false;
            this.queryUserList();
          }
        })
      },

      //导出接口数据
      outputItfData(){
        //判断是否已选择
        if(this.multipleSelection.length === 0){
          this.$message.error("请选择一条接口数据！");
          return;
        }
        this.$http({
          method: "post",
          url: "/mock/interface/export",
          data: this.multipleSelection,
          responseType: "blob"
        }).then(resp => {
          let url = window.URL.createObjectURL(new Blob([resp.data])); //创建blob,设置文件类型
          let a = document.createElement('a'); //创建a标签
          a.download = "接口数据表.xls"; //指定文件名
          a.style.display = 'none';
          a.href = url; //创建url
          a.click(); //click事件触发下载
          // URL.revokeObjectURL(a); //释放内存
        });
      },

      //查询接口列表
      queryUserList(){
        this.$http.post("/user/queryList", {
          "curPage": this.curPage,
          "size": this.size,
          "username": this.uform.uname,
          "loginName": this.uform.logname,
          "nickname": this.uform.nickname,
          "age": this.uform.age === '' ? null : parseInt(this.uform.age),
          "email": this.uform.umail,
          "phone": this.uform.uphone,
          "address": this.uform.uaddress,
          "avaUrl": this.uform.avaurl
        }).then(resp => {
          if (resp.data.errCode === 200){
            this.total = resp.data.data.totals;
            this.pages = resp.data.data.pages;
            this.utableData = resp.data.data.data;
          }
        })
      },

      //查询单个接口
      queryOne(id){
        this.$http.post("/user/query/"+id).then(resp => {
          if(resp.data.errCode === 200){
            this.modifyItfVisible = true;
            this.modifyUserForm.username = resp.data.data.username;
            this.modifyUserForm.loginname = resp.data.data.loginName;
            this.modifyUserForm.nickname = resp.data.data.nickname;
            this.modifyUserForm.email = resp.data.data.email;
            this.modifyUserForm.phone = resp.data.data.phone;
            this.modifyUserForm.address = resp.data.data.address;
            this.modifyUserForm.birthday = resp.data.data.birthday;
          }
        })
      },

      //删除单个接口
      submitDelItf(id){
        this.$http.post("/user/delete/"+id).then(resp => {
          if(resp.data.errCode === 200){
            this.$message.success("删除成功！");
            this.queryUserList();
          }
        })
      },

      //关联角色
      relateRoleOpr(){
        this.$http.post("/user/relateRole", {
          "curRole": this.formInline.curRole,
          "newRole": this.formInline.newRole,
          "loginName": this.multipleSelection[0].loginName
        }).then(resp => {
          if(resp.data.errCode === 200){
            this.$message.success("角色关联成功！");
            this.relateRoleVisible = false;
            this.queryUserList();
          }
        })
      },

      //清空查询条件
      clearQuery(){
        this.uform = {
          uname: '',
          logname: '',
          nickname: '',
          age: '',
          umail: '',
          uphone: '',
          avaurl: '',
          uaddress: '',
        }
      },
      clearAddItfForm(){
        this.addItfForm = {
          name: '',
          url: '',
          method: '',
          respParams: [],
        }
      },
      checkJsonArray(respParams) {
        if(respParams === '' || respParams === null){
          this.$message.error("请输入正确格式的响应规则！");
          return;
        }

      }
    }
  }
</script>

<style scoped>
  .form-item{
    margin-left: 20px;
    width: 20%;
    display: inline-block;
  }
  .form-btn{
    position: relative;
    left: -60px;
  }
  .tag-btn{
    margin-left: 20px;
  }
  .interface-table{
    position: relative;
    left: 20px;
    top:10px;
  }
  .interpage{
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .curPageCounter{
    float: right;
    right: 40px;
  }
</style>
